<template>
    <div class="offshoreRegistration">
      <div class="header">
        <van-nav-bar title="离岸注册" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
        <nav>
          <a href="javascript:void(0)" v-anchor="index" v-for="(item,index) in navList" :class="{active:isred===index}" @click="change(index)">
            {{item.name}}
          </a>
        </nav>
      </div>
      <section>
        <div :id="'anchor-'+index" class="section_head" v-for="(i,index) in navList" >
          <img :src="i.url"/>
        </div>
      </section>
      <footer>
        <div class="foot">
          <div class="footer_left" @click="toRegistration()">
            <img src="../../assets/images/greenFinance/10.png">
          </div>
          <div class="footer_right" @click="link()">
            <img src="../../assets/images/greenFinance/11.png">
          </div>
        </div>

      </footer>
      <!--<div style="position: fixed;bottom: 1rem;right: 0.1rem;width: 0.6rem;height: 0.6rem;" @click="toLink()">-->
        <!--<img src="../../assets/images/greenFinance/31.png" style="width: 100%;">-->
      <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "offshoreRegistration",
      data() {
        return {
          navList:[
            {
              name:'注册流程',
              url:require("../../assets/images/greenFinance/7.png"),
            },
            {
              name:'公司用途',
              url:require('../../assets/images/greenFinance/8.png'),
            },
            {
              name:'获得证件',
              url:require('../../assets/images/greenFinance/9.png'),
            },

          ],
          isred:0
        }
      },
      mounted() {


      },
      methods: {
        change:function(index){
          this.isred=index
        },
        toRegistration(){
          var token = this.$cookies.get("token")||localStorage.getItem('token');
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          if(!token){
            if (isAndroid) {
              console.warn("ecologylogin");
            } else if (isiOS) {
              window.webkit.messageHandlers.goBackLogin.postMessage(null);
            }
          }else {
            this.$router.push({path: '/planFormulation', query: {}})
          }
        },
        //返回
          onClickLeft() {
            let u = navigator.userAgent;
            let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let params={

            };
            if (isAndroid) {
              console.warn('finish');
            } else if (isiOS) {
              window.webkit.messageHandlers.onClickLeftYuansheng.postMessage(params);
            }
        },
        link(){
          this.$router.push({path: '/offshoreApplicationRecord', query:{}})
        },
        async toLink(){
          const res = await this.$axios.post(this.$api.businessCirclesData);
          if (res.data) {
            this.$router.push({path: '/offshoreProcess'})
          } else {
            this.$toast(res.msg);
          }
        },
      },
    }
</script>

<style scoped>

nav{height: 0.41rem;line-height: 0.41rem;text-align: center;position: fixed;top:0.46rem;width: 100%;overflow: hidden;background-color: #fff;}
nav a{width: 25%;float: left;margin-left:6%;line-height: 0.395rem;color: #000;}
.active {
  color: #01bf47;
  border-bottom: 2px solid #01bf47;
}
section{margin-top: 0.88rem;}
.section_head{width: 100%;}
.section_head img{width: 100%;}
footer{width: 100%;position: fixed;bottom: 0;padding-bottom: 0.1rem;}
.foot{overflow: hidden;width: 80%;margin: 0 auto;}
.footer_left{width: 50%;position: relative;right: -0.07rem;float: left}
.footer_left img{width: 100%;height: 0.54rem;}
.footer_right{width: 50%;position: relative;left:-0.07rem;float: left}
.footer_right img{width: 100%;height: 0.54rem;}
</style>
